<template>
	<view>
		<view class="header" style="overflow: hidden;height:300rpx;background-image: url(../../../static/image/home/caipusousuo_slices/ditu%20.png);">
			<text style="text-align: center;display: block;margin-top: 60rpx;color: #ffffff;font-size: 40rpx;">食材分类</text>
			<view class="header-item" style="width: 400rpx;margin: 40rpx auto; border:2rpx solid #FFFFFF ;
			height: 60rpx;border-radius: 30rpx;display: flex;">
				<view class="header-item1" style="background-color: #FFFFFF;color: #ff8000;"> 
					分类
				</view>
				<view class="header-item1">
					食材
				</view>
			</view>
			<view class="input"  style="background-color: #F1F1F1;border-radius: 20rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;margin-top: -20rpx;">
				<image src="../../static/image/home/caipusousuo_slices/mengbanzu%202.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
				<input type="text" value="" placeholder="先吃什么搜这里,如麻婆豆腐" style="width: 200rpx;font-size: 20rpx;margin-left: 20rpx;"/>
			</view>
		</view>
			<scroll-view scroll-y="trun" style="width: 200rpx; height:calc(100vh - 300rpx) ;background-color: #007AFF;float: left;" >
				<view class="scrpllitem" style="width: 200rpx;height: 100rpx;" v-for="item in list" v-key="item.id">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="trun" style="width: 550rpx; height: 840rpx;float: left;" >
			<text>热门</text>
			<view class="item">
				<view> 
				<image src="../../static/image/shicaifenlei_slices/baobaofushi.png" mode=""></image> 
				<text>家常菜</text></view>
				<view>
				<image src="../../static/image/shicaifenlei_slices/baobaofushi.png" mode=""></image> 
				<text>家常菜</text></view>
				<view>
				<image src="../../static/image/shicaifenlei_slices/baobaofushi.png" mode=""></image> 
				<text>家常菜</text></view>
				<view>
				<image src="../../static/image/shicaifenlei_slices/baobaofushi.png" mode=""></image> 
				<text>家常菜</text></view>
				<view>
				<image src="../../static/image/shicaifenlei_slices/baobaofushi.png" mode=""></image> 
				<text>家常菜</text></view>
				<view>
				<image src="../../static/image/shicaifenlei_slices/baobaofushi.png" mode=""></image> 
				<text>家常菜</text></view>
				
			</view>
			</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{id:1,name:"热门"},
					{id:2,name:"菜式"},
					{id:3,name:"场景"},
					{id:4,name:"菜系"},
					{id:5,name:"主食"},
					{id:6,name:"烘焙"},
					{id:7,name:"功效"},
					{id:8,name:"菜系"},
					{id:9,name:"主食"},
					{id:10,name:"烘焙"},
					{id:11,name:"功效"},
					
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.header-item1{
		width: 50%;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
	}
	.input{
		width: 95%;
		margin: 0 auto;
	}
	.scrpllitem{
		text-align: center;
		line-height: 100rpx;
	}
	.item{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}
	.item view{
		width: 30%;
		background-color: #007AFF;
		text-align: center;
		font-size: 20rpx;
		margin-bottom: 20rpx;
		color: #808080;
	}
	.item view image{
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
		display: block;
	}
	
</style>

